<template>
  <view class="gold">
    <image
      src="../../../static/iamges/dingqihuangjin/huangjinbanner.png"
      mode=""
    ></image>
    <view class="txt">
      <view class="title">
        {{ names.txt1 }} <text>{{ names.txt2 }}</text>
      </view>

      <view class="main">
        <view class="txt1">
          <view v-for="a in names.txt3" :key="a">{{ a }}</view>
        </view>

        <view v-for="(item, index) in hotGolds" :key="index" @click="goldsXin(item)">
          <view class="line"></view>
          <view class="txt2">
            <view>
              <view class="black">
                {{ item.fundName }}
              </view>
              <view>
                {{ item.fundCode }}
              </view>
            </view>
            <view class="red">{{ item.fundGoldPrice }}</view>
            <view class="green">{{ item.lastMonth }}%</view>
          </view>
        </view>
      </view>
    </view>
    <view class="txt">
      <view class="title">
        {{ name.txt1 }} <text>{{ name.txt2 }}</text>
      </view>

      <view class="main">
        <view class="txt1">
          <view v-for="a in name.txt3" :key="a">{{ a }}</view>
        </view>

        <view v-for="(item, index) in newGolds" :key="index" @click="goldsXin(item)">
          <view class="line"></view>
          <view class="txt2">
            <view>
              <view class="black">
                {{ item.fundName }}
              </view>
              <view>
                {{ item.fundCode }}
              </view>
            </view>
            <view class="red">{{ item.leastPrice }}</view>
            <view class="green">{{ item.netWorth}}%</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("huangjin");
export default {
  created() {
    this.getHotGolds();
    this.getGoldNewProducts();
  },
  methods: {
    ...mapActions(["getHotGolds", "getGoldNewProducts"]),
	goldsXin(a){
		console.log(a,'lllllll')
		uni.navigateTo({
    	url:'/pages/hangjin/hangjin?id='+a.id+'&name='+a.fundName+'&fundCode='+a.fundCode
		})
	}
  },
  computed: {
    ...mapState(["hotGolds", "newGolds"]),
  },
  data() {
    return {
      name: {
        txt1: "新品推荐",
        txt2: "1元起投， 省心省力",
        txt3: ["名称", "求购(元)", "近一年收益率"],
      },
      names: {
        txt1: "热门推荐",
        txt2: "T+0交易，买卖灵活",
        txt3: ["名称", "现价", "最新涨幅"],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.gold {
  padding: 0 24rpx;
  background: #fafafa;
  > image {
    padding-top: 40rpx;
    width: 702rpx;
    height: 240rpx;
  }

  .txt {
    font-family: "PingFang SC";
    padding: 40rpx 0;

    .title {
      font-size: 36rpx;
      color: #333333;
      padding-bottom: 24rpx;

      text {
        font-size: 24rpx;
        color: #cdcdcd;
        padding-left: 10rpx;
      }
    }

    .main {
      background-color: rgb(255, 255, 255);
      font-family: "DINPro";
      padding: 0 24rpx;
      color: #777777;
      border-radius: 30rpx;

      .line {
        border-top: 2rpx solid #8a8a8a;
      }

      .txt1 {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0 26rpx;
        font-family: "PingFang SC";
        font-size: 28rpx;

        > view:nth-child(1) {
          width: 50%;
        }
      }

      .txt2 {
        display: flex;
        justify-content: space-between;
        padding: 24rpx 0;

        > view:nth-child(1) {
          width: 50%;
        }

        > view {
          font-size: 24rpx;

          .black {
            font-family: "PingFang SC";
            font-size: 32rpx;
            color: #555555;
          }
        }

        .red {
          color: #ff4658;
          font-size: 36rpx;
        }

        .green {
          color: #00aa8e;
          font-size: 36rpx;
        }
      }
    }
  }
}
</style>
